<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <script src="js/index.js"></script>
    <script src="js/axios-0.18.0.js"></script>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>

<div id="heima">

    <el-table
            :data="userList"
            style="width: 100%">
        <el-table-column
                label="编号"
                width="180">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.id }}</span>
            </template>
        </el-table-column>

        <el-table-column
                label="姓名"
                width="180">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.username }}</span>
            </template>
        </el-table-column>

        <el-table-column
                label="生日"
                width="180">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.birthday }}</span>
            </template>
        </el-table-column>


        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-pagination
            background
            layout="prev, pager, next"
            :total="1000">
    </el-pagination>

</div>
</body>
<script>
    // 数据模型  vue对象 实例化
    var   vue = new Vue({
        el:"#heima",  //  挂载标签的申明
        data:{
            userList:[], //   赋值 来自后台 ajax请求结果\
        },
        created(){
            // alert("----")
            axios.get("user/findAll").then((res)=>{
                //  服务器回送json数据    axios组件 使用 res.data接收后台的纯数据
                //alert(JSON.stringify(res.data))
                this.userList = res.data  //  数据模型  userList  赋值
            })
        }

    })




</script>


</html>
